/**
 * @description  交易监控
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, XYHorizontalChartsC } from '../../../comps';
import style from './index.less';

class showEchartsTwo extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    const { dispatch, tenant } = this.props;
    dispatch({
      type: 'TransactionMonitoringM/getEchartsTwo',
      payload: { tenant },
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tenant, timeStamp } = nextProps;
    if (tenant !== tenant || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'TransactionMonitoringM/save',
        payload: { getEchartsTwo: { xaxis: [], series: undefined } },
      });
      dispatch({
        type: 'TransactionMonitoringM/getEchartsTwo',
        payload: { tenant },
      });
    }
  }

  render() {
    const {
      TransactionMonitoringM: { getEchartsTwo },
      tenant,
    } = this.props;
    const yAxis = getEchartsTwo.xaxis;
    const series = getEchartsTwo.series;
    return (
      <div className={style.body_area}>
        <SecondHeaderC title={tenant ? '资产规模TOP5' : '机构规模TOP5'} />
        <div className='showEcharts2'>
          <XYHorizontalChartsC
            series={series}
            yAxis={yAxis}
            showBorder={false}
            toolTipDataFormat={[(value) => (value && value != '--' ? value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') : '--')]}
            title={tenant ? '资产规模(单位：亿元)' : '机构规模(单位：亿元)'}
            height={310}
          />
        </div>
      </div>
    );
  }
}
export default connect(({ TransactionMonitoringM }) => ({
  TransactionMonitoringM,
}))(showEchartsTwo);
